<template>
  <div class="body">
    <div class="main-box">
      <!-- 注册面板 -->
      <div :class="['container', 'container-register', { 'is-txl': isLogin }]">
        <!-- 阻止form默认提交（按回车不刷新页面） -->
        <form @submit.prevent>
          <h2 class="title">注册</h2>
          <div class="form__icons">
            <!-- 图片路径用@别名（Vue规范，避免打包后路径错误） -->
            <img alt="微信登录" class="form__icon" src="../assets/wechat.png">
            <img alt="支付宝登录" class="form__icon" src="../assets/alipay.png">
            <img alt="QQ登录" class="form__icon" src="../assets/QQ.png">
          </div>
          <span class="text">或使用邮箱进行注册</span>
          <input
              v-model="registerForm.name"
              class="form__input"
              placeholder="请输入用户名"
              type="text"
          />
          <input
              v-model="registerForm.email"
              class="form__input"
              placeholder="请输入邮箱"
              type="email"
              @blur="validateEmail"
          />
          <!-- 密码显示/隐藏（可选优化，提升体验） -->
          <input
              v-model="registerForm.password"
              :type="registerPwdVisible ? 'text' : 'password'"
              class="form__input"
              placeholder="请输入密码"
          />
          <input
              v-model="registerForm.confirmPassword"
              :type="registerPwdVisible ? 'text' : 'password'"
              class="form__input"
              placeholder="请确认密码"
          />
          <!-- 密码显示切换按钮 -->
          <div class="pwd-toggle" @click="registerPwdVisible = !registerPwdVisible">
            {{ registerPwdVisible ? '隐藏密码' : '显示密码' }}
          </div>
          <div class="form__button" @click="handleRegister">立即注册</div>
        </form>
      </div>

      <!-- 登录面板 -->
      <div :class="['container', 'container-login', { 'is-txl is-z200': isLogin }]">
        <form @submit.prevent> <!-- 同样阻止默认提交 -->
          <h2 class="title">登录</h2>
          <div class="form__icons">
            <img alt="微信登录" class="form__icon" src="../assets/wechat.png">
            <img alt="支付宝登录" class="form__icon" src="../assets/alipay.png">
            <img alt="QQ登录" class="form__icon" src="../assets/QQ.png">
          </div>
          <span class="text">或使用用户名登录</span>
          <input
              v-model="loginForm.username"
              class="form__input"
              placeholder="用户名/邮箱/手机号"
              type="text"
          />
          <input
              v-model="loginForm.password"
              :type="loginPwdVisible ? 'text' : 'password'"
              class="form__input"
              placeholder="请输入密码"
          />
          <div class="pwd-toggle" @click="loginPwdVisible = !loginPwdVisible">
            {{ loginPwdVisible ? '隐藏密码' : '显示密码' }}
          </div>
          <div class="form__button" @click="handleLogin">立即登录</div>
        </form>
      </div>

      <!-- 切换面板 -->
      <div :class="['switch', { 'login': isLogin }]">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle_top"></div>
        <div class="switch__container">
          <h2>{{ isLogin ? '您好 !' : '欢迎回来 !' }}</h2>
          <p>
            {{
              isLogin
                  ? '如果您还没有账号，请点击下方立即注册按钮进行账号注册'
                  : '如果您已经注册过账号，请点击下方立即登录按钮进行登录'
            }}
          </p>
          <div class="form__button" @click="isLogin = !isLogin">
            {{ isLogin ? '立即注册' : '立即登录' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入必要依赖（移除mapActions，直接实例化store更清晰）
import {userStore} from "../store/UserStore.js";
import {showFailToast, showSuccessToast} from 'vant';

export default {
  name: 'Login',
  data() {
    return {
      isLogin: true, // 控制显示登录/注册面板
      // 登录表单（参数名与userStore.login、后端接口对齐）
      loginForm: {
        username: '', // 对应后端loginName（userStore.login直接传payload，无需改名）
        password: ''  // 对应后端loginPwd
      },
      // 注册表单（参数名与userStore.register、后端接口对齐）
      registerForm: {
        name: '',       // 对应后端loginName（用户名）
        email: '',      // 对应后端email
        password: '',   // 对应后端loginPwd
        confirmPassword: '' // 二次确认密码（前端验证用）
      },
      loginPwdVisible: false,   // 登录密码显示/隐藏切换
      registerPwdVisible: false,// 注册密码显示/隐藏切换
      emailValid: true          // 邮箱格式验证状态
    }
  },
  created() {
    // 实例化userStore（在created中创建，避免重复实例化）
    this.store = userStore();
  },
  methods: {
    /**
     * 邮箱格式验证（失焦时触发）
     * 规则：包含@和.，且@后有内容，.后有至少2位字符
     */
    validateEmail() {
      const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      this.emailValid = emailReg.test(this.registerForm.email);
      if (!this.emailValid && this.registerForm.email) {
        showFailToast('请输入正确的邮箱格式（如xxx@xxx.com）');
      }
    },

    /**
     * 登录逻辑
     * 依赖：userStore.login（已通过拦截器处理错误）
     */
    async handleLogin() {
      console.log('登录表单：', this.loginForm);
      // 1. 基础验证（不变）
      if (!this.loginForm.username.trim()) {
        return showFailToast('请输入用户名/邮箱/手机号');
      }
      if (!this.loginForm.password.trim()) {
        return showFailToast('请输入密码');
      }

      try {
        // 2. 先执行login（等待Store完全处理完，无错误再提示成功）
        const data = await this.store.login({
          loginName: this.loginForm.username.trim(),
          loginPwd: this.loginForm.password.trim()
        });

        // 3. 只有login完全成功（无抛错），才显示成功并跳转
        showSuccessToast('登录成功，正在跳转...');
        if(data.user.role === 1){
          this.$router.replace('layout_admin');
        }else{
          this.$router.replace('layout_user');
        }

      } catch (e) {
        // 4. 错误提示：明确错误来源（避免模糊的“请稍后再试”）
        showFailToast(`登录失败：${e.message || '网络异常，请重试'}`);
        // 可选：打印错误日志，方便调试
        console.error('登录错误详情：', e);
      }
    },

    /**
     * 注册逻辑
     * 依赖：userStore.register（已通过拦截器处理错误）
     */
    async handleRegister() {
      // 1. 基础表单验证（空值、邮箱、密码一致性、密码强度）
      const {name, email, password, confirmPassword} = this.registerForm;
      if (!name.trim()) return showFailToast('请输入用户名');
      if (!email.trim()) return showFailToast('请输入邮箱');
      if (!password.trim()) return showFailToast('请输入密码');
      if (!confirmPassword.trim()) return showFailToast('请确认密码');
      // 邮箱格式验证（若未触发失焦，这里再校验一次）
      if (!this.emailValid && email) return showFailToast('请输入正确的邮箱格式');
      // 密码一致性验证
      if (password !== confirmPassword) return showFailToast('两次密码不一致');
      // 密码强度验证（至少6位，可根据需求调整）
      if (password.length < 6) return showFailToast('密码长度不能少于6位');

      try {
        // 2. 调用userStore.register（拦截器已处理错误）
        await this.store.register({
          loginName: name.trim(),  // 对应后端loginName（用户名）
          email: email.trim(),     // 对应后端email
          loginPwd: password.trim()// 对应后端loginPwd
        });

        // 3. 注册成功（拦截器已确认code=0）
        showSuccessToast('注册成功，请登录！');
        this.isLogin = true; // 切回登录面板
        // 清空注册表单（避免信息残留）
        this.registerForm = {
          name: '',
          email: '',
          password: '',
          confirmPassword: ''
        };
        // 重置密码显示状态
        this.registerPwdVisible = false;

      } catch (e) {
        // 4. 错误处理（拦截器已封装错误信息）
        showFailToast(e.message || '注册失败，请稍后再试');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 原有样式保留，新增密码显示切换按钮样式 */
.body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  background-image: url("../assets/background.jpg"); // 路径优化：用@别名
  color: #a0a5a8;
}

.main-box {
  /* 原有样式保留 */
  position: relative;
  width: 1000px;
  min-width: 1000px;
  min-height: 600px;
  height: 600px;
  padding: 25px;
  background-color: #ecf0f3;
  box-shadow: 1px 1px 100px 10px #ecf0f3; // 修复阴影语法错误（PX→px）
  border-radius: 12px;
  overflow: hidden;

  /* 密码显示切换按钮样式 */
  .pwd-toggle {
    width: 350px;
    text-align: right;
    margin: 8px 0 -10px;
    font-size: 11px;
    color: #4b70e2;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }

  /* 原有.container、.switch等样式保留，仅修复路径和语法错误 */
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 600px;
    height: 100%;
    padding: 25px;
    background-color: #ecf0f3;
    transition: all 1.25s;

    form {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      color: #a0a5a8;

      .form__icon {
        object-fit: contain;
        width: 30px;
        margin: 0 5px;
        opacity: .5;
        transition: .15s;

        &:hover {
          opacity: 1;
          cursor: pointer;
        }
      }

      .title {
        font-size: 34px;
        font-weight: 700;
        line-height: 3;
        color: #181818;
      }

      .text {
        margin-top: 30px;
        margin-bottom: 12px;
      }

      .form__input {
        width: 350px;
        height: 40px;
        margin: 4px 0;
        padding-left: 25px;
        font-size: 13px;
        letter-spacing: 0.15px;
        border: none;
        outline: none;
        background-color: #ecf0f3;
        transition: 0.25s ease;
        border-radius: 8px;
        box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;

        &::placeholder {
          color: #a0a5a8;
        }
      }
    }
  }

  .container-register {
    z-index: 100;
    left: calc(100% - 600px);
  }

  .container-login {
    left: calc(100% - 600px);
    z-index: 0;
  }

  .is-txl {
    left: 0;
    transition: 1.25s;
    transform-origin: right;
  }

  .is-z200 {
    z-index: 200;
    transition: 1.25s;
  }

  .switch {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 400px;
    padding: 50px;
    z-index: 200;
    transition: 1.25s;
    background-color: #ecf0f3;
    overflow: hidden;
    box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
    color: #a0a5a8;

    .switch__circle {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background-color: #ecf0f3;
      box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
      bottom: -40%;
      left: -60%;
      transition: 1.25s;
    }

    .switch__circle_top {
      top: -30%;
      left: 60%;
      width: 300px;
      height: 300px;
    }

    .switch__container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: absolute;
      width: 400px;
      padding: 50px 55px;
      transition: 1.25s;

      h2 {
        font-size: 34px;
        font-weight: 700;
        line-height: 3;
        color: #181818;
      }

      p {
        font-size: 14px;
        letter-spacing: 0.25px;
        text-align: center;
        line-height: 1.6;
      }
    }
  }

  .login {
    left: calc(91% - 400px);

    .switch__circle {
      left: 0;
    }
  }

  .form__button {
    width: 180px;
    height: 50px;
    border-radius: 25px;
    margin-top: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    letter-spacing: 2px;
    background-color: #4b70e2;
    color: #f9f9f9;
    cursor: pointer;
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;

    &:hover {
      box-shadow: 2px 2px 3px 0 rgba(255, 255, 255, 0.5),
      -2px -2px 3px 0 rgba(116, 125, 136, 0.5),
      inset -2px -2px 3px 0 rgba(255, 255, 255, 0.2),
      inset 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    }
  }
}
</style>